<div class="table-responsive text-center">
    <table style="color: black;table-layout: fixed;" summary="<%= gettext "Log Data" %>" class="table thead-light table-bordered">
        <tr>
        <th scope="col" style="width: 110px;"><%= gettext "Name" %></th>
        <th scope="col" style="width: 100px;"><%= gettext "Type" %></th>
        <th scope="col" style="width: 75px;"><%= gettext "Indexed?" %></th>
        <th scope="col"><%= gettext "Data" %></th>
        <tr>
    <%= for {name, type, indexed?, value} <- @mapping do %>
        <tr>
            <td><%= name %></td>
            <td><%= type %></td>
            <td><%= indexed? %></td>
            <td align=left>
            <%= case BlockScoutWeb.ABIEncodedValueView.copy_text(type, value) do %>
                <% :error -> %>
                    <%= nil %>
                <% copy_text -> %>
                    <span
                        aria-label='<%= gettext "Copy Value" %>'
                        class="btn-copy-ico"
                        data-clipboard-text="<%= copy_text %>"
                        data-placement="top"
                        data-toggle="tooltip"
                        style="float: left;height: 20px;"
                    >
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.5 32.5" width="25" height="25">
                        <path fill-rule="evenodd" d="M23.5 20.5a1 1 0 0 1-1-1v-9h-9a1 1 0 0 1 0-2h10a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1zm-3-7v10a1 1 0 0 1-1 1h-10a1 1 0 0 1-1-1v-10a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1zm-2 1h-8v8h8v-8z"/>
                        </svg>
                    </span>
            <% end %>
            <pre class="transaction-input-text pre-wrap"><code><%= BlockScoutWeb.ABIEncodedValueView.value_html(type, value) %></code></pre>
            </td>
        </tr>
    <% end %>
    </table>
</div>